<template>
  <div class="card-container">
    <!-- 搜索区域 -->
    <div class="search-container">
      <span class="search-label">一体杆名称：</span>
      <el-input v-model="dataParams.poleName" clearable placeholder="请输入一体杆名称" class="search-main" />
      <span class="search-label">一体杆编号：</span>
      <el-input v-model="dataParams.poleNumber" clearable placeholder="请输入一体杆编号" class="search-main" />
      <span class="search-label">处置状态：</span>
      <el-select v-model="dataParams.handleStatus ">
        <el-option
          v-for="item in selectStatus"
          :key="item.id"
          placeholder="请选择处置状态"
          :label="item.value"
          :value="item.id"
        />
      </el-select>
      <el-button type="primary" class="search-btn" @click="serchList">查询</el-button>
    </div>
    <!-- 表格区域 -->
    <div class="table">
      <el-table style="width: 100%" :data="tableData" @selection-change="handleSelectionChange">
        <el-table-column type="index" label="序号" />
        <el-table-column label="一体杆名称" prop="poleName" />
        <el-table-column label="一体杆编号" prop="poleNumber" />
        <el-table-column label="故障类型" prop="errorType" />
        <el-table-column label="处置状态" prop="handleStatus" :formatter="formatStatus" />
        <el-table-column label="告警时间" prop="warningTime" />
        <el-table-column label="操作" fixed="right" width="180">
          <template #default="{row}">
            <el-button size="mini" type="text" :disabled="true">派单</el-button>
            <el-button size="mini" type="text" @click="lookWarn(row.id)">详情</el-button>
            <el-button size="mini" type="text" :disabled="true">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <!-- current-change：切换页码的事件 -->
      <el-pagination
        layout="total, prev,sizes, pager, next"
        :page-size="dataParams.pageSize"
        :total="total"
        :page-sizes="[2, 5,10,20]"
        @current-change="pageChage"
        @size-change="handleSizeChange"
      />
    </div>
  </div>
</template>

<script>
import { deleteRodWarnAPI, getRodWarnListAPI } from '@/api/rodWarn'
export default {
  data() {
    return {
      multipleSelection: [],
      // 定义成对象，可以直接通过接口发给后台
      dataParams: {
        page: 1,
        pageSize: 5,
        poleName: '',
        poleNumber: '',
        handleStatus: ''
      },
      tableData: [],
      total: 0,
      selectStatus: [
        {
          id: 0,
          value: '全部'
        },
        {
          id: 1,
          value: '未派单'
        },
        {
          id: 2,
          value: '已派单'
        },
        {
          id: 3,
          value: '已接单'
        },
        {
          id: 4,
          value: '已完成'
        }
      ]
    }
  },
  created() {
    this.getRodWarnList()
  },
  methods: {
    // 获取告警记录列表
    async getRodWarnList() {
      const res = await getRodWarnListAPI()
      // console.log(res)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    // 查询
    serchList() {
      this.dataParams.page = 1
      this.getRodWarnList()
    },
    // 分页
    pageChage(val) {
      this.dataParams.page = val
      this.getRodWarnList()
    },
    handleSizeChange(val) {
      this.dataParams.pageSize = val
      this.getRodWarnList()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    formatStatus(row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      const statusMap = {
        0: '未派单',
        1: '已派单',
        2: '已接单',
        3: '已完成'
      }
      return statusMap[cellValue]
    },
    deletePole(id) {
      this.$confirm('是否确认删除当前告警记录?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await deleteRodWarnAPI(id)
        // 如果删除的是最后一条数据 获取列表时 应该让 page--
        if (this.warningList.length === 1 && this.params.page > 1) {
          this.params.page--
        }
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        await this.serchList()
      }).catch(() => {})
    },
    dispatchOrders(id) {
      this.$message.info('未开放')
    },
    // 查看详情
    lookWarn(id) {
      console.log(id)
      this.$router.push({
        path: '/lookWarn',
        query: {
          id
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-container {
  padding: 20px;
  background-color: #fff;
}

.search-container {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(237, 237, 237, .9);
  padding-bottom: 20px;
  .search-main {
    width: 220px;
    margin-right: 10px;
  }
  .search-btn{
    margin-left:20px;
  }
}
.create-container{
  margin: 10px 0px;
}
.page-container{
  padding:4px 0px;
  text-align: right;
}
.form-container{
  padding:0px 80px;
}
</style>
